<template>
  <div style="height: 100%;width: 100%;overflow: hidden">
    <div v-loading="loading" ref="bodyRef" style="height: calc(100% - 160px);overflow-y: auto" @scroll="scrollChange">
      <el-empty v-if="allComments.length === 0" description="无备注数据">
        <el-button icon="el-icon-refresh" type="text" title="刷新" :disabled="loading" @click="loadSource([])" >刷新</el-button>
      </el-empty>
      <el-timeline v-else style="padding: 12px">
        <el-timeline-item v-for="item in allComments" :key="item.commentId" :timestamp="item.bottomStr" :type="item.type" placement="bottom">
          <el-card :class="{ self : loginUser.userId === item.createById }">
            <span> {{ item.commentStr }}</span>
            <el-button v-if="loginUser.userId === item.createById" class="self-op" type="danger" icon="el-icon-delete" circle @click="removeData(item)" title="删除"></el-button>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div style="height: 160px">
      <el-input type="textarea" :rows="6" placeholder="添加评论" @keydown.enter="addComment" v-model="comment"></el-input>
      <div style="text-align: center;margin-top: 8px">
        <el-button type="primary" icon="el-icon-position" @click="addComment">添加备注</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import IdeaTable from "@/mixins/IdeaTable";

export default {
  name: "ProcessComment",
  mixins: [IdeaTable],
  inject: {
    /**
     * 流程方法注入
     */
    $labProcess: {
      from: '$labProcess',
      default: function () {
        return undefined
      }
    },
  },
  data() {
    return {
      comment: '',
      allComments: []
    }
  },
  created() {
    this.queryUrl = '/process/queryComment'
    this.saveUrl = '/process/addComment'
    this.removeUrl = '/process/removeComment/'
    this.rowKey = 'commentId'
    const { processDefId, mainValue } = this.$labProcess.info
    this.addFilter({ field: 'processDefId', op: '=', value: processDefId || '0' })
    this.addFilter({ field: 'mainValue', op: '=', value: mainValue || '0' })
    this.pageInfo.sorts.push({ field: 'createAt', asc: false })
    this.loadSource()
    this.scriptBottom()
  },
  methods: {
    addComment() {
      if (!this.comment) {
        this.$resultMsg(this, { msg: '请输入内容' })
        return
      }
      const { processDefId, mainValue, todoId, processInsId, activityType, activityName } = this.$labProcess.info
      const item = { processDefId, mainValue, todoId, processInsId, activityType, activityName, commentStr: this.comment }
      this.saveData(item)
    },
    saveComplate(){
      this.pageInfo.page = 1
    },
    removeComplate(){
      this.pageInfo.page = 1
    },
    scriptBottom() {
      setTimeout(() => {
        let scrollEl = this.$refs.bodyRef;
        scrollEl.scrollTo({ top: scrollEl.scrollHeight });
      }, 400)
    },
    scrollChange(e) {
      const { scrollTop} = e.target
      if (scrollTop === 0) {
        const { page, pages } = this.pageInfo
        if (page < pages) {
          this.pageInfo.page = page + 1
          this.loadSource()
        }
      }
    },
    appendRender(item, first) {
      item.bottomStr = `${item.createAt}  - ${item.createByName}(${item.activityName})`
      item.type = this.loginUser.userId === item.createById ? 'success' : 'primary'
      /*if (first) {
        this.allComments.push(item)
      } else {
        this.allComments.splice(0, 0, item)
      }*/
      // this.allComments.push(item)
      this.allComments.splice(0, 0, item)
    },
    loadComplate() {
      const first = this.pageInfo.page < 2
      if (first) {
        this.allComments.splice(0, this.allComments.length)
      }
      this.dataSource.forEach(item => {
        this.appendRender(item, first)
      })
      this.comment = ''
      if (first) {
        this.scriptBottom()
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .self {
    position: relative;
    .self-op {
      display: none;
      position: absolute;
      right: 10px;
      bottom: 2px;
    }
    &:hover {
      .self-op {
        display: block;
      }
    }
  }
</style>
